<template>
  <div>
    <tree-select
    :checkedKeys="checkedKeys"
    :width="140"
    :dataGrid="dataGrid"
    placeholder="因子选择"
    :show-checkbox="showCheckbox"
    @change="changePolluteGroup">
    </tree-select> 
  </div>
</template>
<script>
import treeSelect from './tree';
import { json } from './data.js';
export default {
  name: 'PolluteGroup',
  props: {
    defaultCheckedNum: {
      type: Number | String,
      default: 8
    },
    showCheckbox: {
      type: Boolean,
      default: true
    },
    pointCode: String,
    checkedKeys: Array
  },
  components: {
    treeSelect
  },
  data() {
    return {
      dataGrid: []
    };
  },
  computed: {
    layoutSkin: {
      get() { return this.$store.state.common.layoutSkin; }
    }
  },
  methods: {
    changePolluteGroup(val) {
      this.$emit('change', val);
    }
  },
  created() {
    const { rows } = json;
    setTimeout(_ => {
      this.dataGrid = rows.map(item => {
        return {
          label: item.groupName,
          id: item.groupCode,
          children: item.list.map(v => {
            return {
              label: v.polluteName,
              id: v.polluteCode,
              pollconCunit: v.pollconCunit,
              pollconCunitVol: v.pollconCunitVol,
              children: []
            };
          })
        };
      });

      this.$emit('data-load', this.dataGrid);
    }, 1500);
  }

};
</script>

<style>

</style>